<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>magic</title>
</head>
<style type="text/css">
    *{
    	margin: 0;padding: 0;
    	outline: none;
    }
    .rotate_btns{
    	width: 420px;
    	height: 50px;
    	position: absolute;
    	left: 60%;
    	top: 20px;
    	font-size: 0;
    }
    .rotate_btns_00{
    	width: 420px;
    	height: 50px;
    	position: absolute;
    	left: 60%;
    	top: 70px;
    	font-size: 0;
    }
    .rotate_btns_01{
    	width: 420px;
    	height: 50px;
    	position: absolute;
    	left: 60%;
    	top: 120px;
    	font-size: 0;
    }
    .rotate_btns_02{
    	width: 420px;
    	height: 50px;
    	position: absolute;
    	left: 60%;
    	top: 170px;
    	font-size: 0;
    }
    .rotate_btns>button,
    .rotate_btns_00>button,
    .rotate_btns_01>button,
    .rotate_btns_02>button{
    	display: inline-block;
    	vertical-align: top;
    	width: 60px;
    	height: 50px;
    	font-size: 16px;
    }
    .big_box_range{
    	width: 310px;
    	height: 69px;
    	position: absolute;
    	left: 20%;
    	top: 20px;
    }
    .big_box_range>div{
    	width: 310px;
    	height: 23px;
    	font-size: 0px;
    }
    .big_box_range>div>input{
    	display: inline-block;
    	vertical-align: top;
    	width: 180px;
    	height: 23px;
    	margin-right: 10px;
    }
    .big_box_range>div>span{
    	display: inline-block;
    	vertical-align: top;
    	font-size: 14px;
    	width: 40px;
    	height: 23px;
    }
	.wrap{
		font-size: 0;
        width: 600px;
        height: 600px;
        margin: 150px 0 0 150px;
        border: 1px solid black;
        perspective:800px;
        position: relative;
        transform: scale(0.8);
	}

	.rotate{
		transform:rotateZ(-180deg);
	}


	.litteWrap{
		display: inline-block;
		vertical-align: top;
        width: 600px;
        height: 600px;
        position: absolute;
        -webkit-transform-style: preserve-3d;
        transform-origin: 300px 300px -300px;
        transition-property: all;
	}


	.big_box{
		display: inline-block;
		vertical-align: top;
        width: 600px;
        height: 600px;
        position: absolute;
        -webkit-transform-style: preserve-3d;
        transform-origin: center center -300px;
        transition: all 1s;
	}

	.box{
		display: inline-block;
		vertical-align: top;
        width: 200px;
        height: 200px;
        position: absolute;
        -webkit-transform-style: preserve-3d;
        transform-origin: center center -100px;
        transition: all 1s;
	}
	.box>div{
        width: 198px;
        height: 198px;
        border: 1px solid black;
        position: absolute;
	}
	.face_01{
		font-size: 50px;
		text-align: center;
		line-height: 198px;
		left: 0px;
		top: -200px;
		transform-origin: bottom;
		transform: rotateX(90deg);
	}
	.face_02{
		font-size: 50px;
		text-align: center;
		line-height: 198px;
		left: -200px;
		top: 0px;
		transform-origin: right;
		transform: rotateY(-90deg);
	}
	.face_03{
		font-size: 50px;
		text-align: center;
		line-height: 198px;
		left: 0px;
		top: 0px;
	}
	.face_04{
		font-size: 50px;
		text-align: center;
		line-height: 198px;
		left: 200px;
		top: 0px;
		transform-origin: left;
		transform: rotateY(90deg);
	}
	.face_05{
		font-size: 50px;
		text-align: center;
		line-height: 198px;
		left: 0px;
		top: 200px;
		transform-origin: top;
		transform: rotateX(-90deg);
	}
	.face_06{
		font-size: 50px;
		text-align: center;
		line-height: 198px;
		left: 0px;
		top: 0px;
		transform:translateZ(-200px) rotateX(180deg);
	}
</style>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<body>
	<div class="rotate_btns">
		<button class="btn1">180-U</button>
		<button class="btn2">180-L</button>
		<button class="btn3">180-F</button>
		<button class="btn4">180-R</button>
		<button class="btn5">180-D</button>
		<button class="btn6">180-B</button>
		<button class="btnF">视角复位</button>
	</div>
	<div class="rotate_btns_00">
		<button class="btn01">-180-U</button>
		<button class="btn02">-180-L</button>
		<button class="btn03">-180-F</button>
		<button class="btn04">-180-R</button>
		<button class="btn05">-180-D</button>
		<button class="btn06">-180-B</button>
	</div>
	<div class="rotate_btns_01">
		<button class="btn7">90-U</button>
		<button class="btn8">90-L</button>
		<button class="btn9">90-F</button>
		<button class="btn10">90-R</button>
		<button class="btn11">90-D</button>
		<button class="btn12">90-B</button>
	</div>
	<div class="rotate_btns_02">
		<button class="btn13">-90-U</button>
		<button class="btn14">-90-L</button>
		<button class="btn15">-90-F</button>
		<button class="btn16">-90-R</button>
		<button class="btn17">-90-D</button>
		<button class="btn18">-90-B</button>
		<button class="btn19">auto</button>
	</div>

	<div class="big_box_range">
			<div>
                <span>X轴</span>
				<input class="x_rotate" type="range" name="points" min="-180" max="180" step="15" value="-30" />
				<span class="x_deg"></span>
			</div>
			<div>
                <span>Y轴</span>
				<input class="y_rotate" type="range" name="points" min="-180" max="180" step="15" value="-30" />
				<span class="y_deg"></span>
			</div>
			<div>
                <span>Z轴</span>
				<input class="z_rotate" type="range" name="points" min="-180" max="180" step="15" value="0" />
				<span class="z_deg"></span>
			</div>
	</div>
	<div class="wrap" id="wrap">
		<div class="big_box" id="big_box" style="transform: rotateX(-30deg) rotateY(-30deg) rotateZ(0deg);">
		</div>
	</div>
</body>
</html>











